import Taro, { Component } from '@tarojs/taro'
import { View, Button, Image, Input } from '@tarojs/components'
import { AtCurtain, AtToast } from 'taro-ui'
import { post } from '../../service/api'
import './index.scss'



class GetVip extends Component {
  constructor() {
    super(...arguments)
    this.state = {
      isOpened: false,
      isShowToast: false,
      msg: "",
      cardNum: ""
    }
  }
  config = {
    navigationBarTitleText: '领取VIP卡',
  }
  // async findCard() {
  //   const { data } = await post('vipCard/find')
  //   if (data.code == 0) {
  //     this.bangdingVip()
  //   } else {
  //     this.pop('当前账户已拥有该类型vip')
  //   }
  // }
  async bangdingVip() {
    const { cardNum } = this.state;
    if (!cardNum.length) {
      this.pop('VIP卡号不能为空');
      return
    }
    const { data } = await post('vipCard/binding', {
      vipCode: cardNum
    })

    if (data.code == 0) {
      this.setState({
        isOpened: true
      })
    }
    if (data.code == -1) {
      this.pop(this.msg)
    }
  }
  async getVip() {
    const { data } = await post('vipCard/receive')
    if (data.code == 0) {
      this.setState({
        isOpened: true
      })
    }
    if (data.code == 2) {
      this.pop('当前账户已拥有该类型vip')
    }
  }

  pop(msg) {
    this.setState({
      isShowToast: true,
      msg: msg
    }, () => {
      setTimeout(() => {
        this.setState({
          isShowToast: false
        })
      }, 1500)
    })
  }
  onClose() {
    this.setState({
      isOpened: false
    })
  }
  cardNum(e) {
    this.setState({
      cardNum: e.detail.value,
    })
  }
  toPageSubscribe() {
    Taro.navigateTo({ url: "/pages/subscribe/index" })
  }
  componentDidMount() {
    this.setState({
      cardNum: "",
    })
  }
  render() {
    const { isOpened, isShowToast, msg, cardNum } = this.state;
    return (
      <View className='get-vip-box'>
        {/* <Image className="vipbg" src={require('../../asset/imgs/vipbg.png')} /> */}
        <View className="content">
          <View className="input-box">
            <Input className="input" value={cardNum} onInput={this.cardNum} type='number' maxLength='7' placeholder="已有VIP卡，输入VIP卡号" placeholder-style="color:#7F7F7F;" />
            <View className="privilege" onClick={this.bangdingVip.bind(this)}>立享特权</View>
          </View>
          <View className="getVip-btn" onClick={this.getVip.bind(this)}>暂无VIP卡，在线领取VIP卡</View>
        </View>
        <View className="subscribe-btn" onClick={this.toPageSubscribe}>预约</View>
        <AtCurtain isOpened={isOpened} onClose={this.onClose.bind(this)} >
          <Image className="mask-img" src={require('../../asset/imgs/vip1.png')} />
        </AtCurtain>
        <AtToast
          isOpened={isShowToast}
          text={msg}
          duration={2000}
        ></AtToast>
      </View>
    )
  }
}

export default GetVip
